<template id="tmp-item-name">
    <div>
        <span v-if="nobg===1" :class="'nobg badge-quality'+quality">@{{ name }}</span>
        <span v-else :class="'badge badge-quality'+quality">@{{ name }}</span>
    </div>
</template>
<script>
    Vue.component("component-item-name", {
        props:["name","quality","nobg"],
        template:"#tmp-item-name",
    });
</script>
<style>
    .badge{
        /*padding: 0.4em 0.9em;*/
        font-size: 100%;
    }
    .badge-quality0{
        color: rgb(157,157,157);background-color: rgb(8,13,34);
    }
    .badge-quality1{
        color: rgb(157,157,157);background-color: rgb(8,13,34);
    }
    .badge-quality2{
        color: rgb(24,244,9);background-color: rgb(8,13,34);
    }
    .badge-quality3{
        color: rgb(2,101,215);background-color: rgb(8,13,34);
    }
    .badge-quality4{
        color: rgb(163,53,238);background-color: rgb(8,13,34);
    }
    .badge-quality5{
        color: rgb(255,128,0);background-color: rgb(8,13,34);
    }
    .badge-quality6{
        color: rgb(222,195,122);background-color: rgb(8,13,34);
    }
    .badge-quality7{
        color: rgb(229 204 128);background-color: rgb(8,13,34);
    }
    .nobg{
        background: none!important;
    }
</style>
